<template>
  <div :style="newStyle">
    <span v-if="$attrs.onlyShow">{{getOptionsText(modelValue,resData,props)}}</span>
    <el-checkbox-group
      v-else
      v-model="formValue"
      v-bind="$attrs"
      :min="$attrs.min||0"
      :max="$attrs.max!==null?$attrs.max:resData.length"
    >
      <template v-if="$attrs.__config__.optionType == 'button'">
        <el-checkbox-button
          v-for="item in resData"
          :key="item[props.value]"
          :label="item[props.value]"
          :value="item[props.value]"
          :disabled="item.disabled"
          :border="$attrs.__config__.border"
        >{{ item[props.label] }}</el-checkbox-button>
      </template>
      <template v-else>
        <el-checkbox
          v-for="item in resData"
          :key="item[props.value]"
          :label="item[props.value]"
          :value="item[props.value]"
          :disabled="item.disabled"
          :border="$attrs.__config__.border"
        >{{ item[props.label] }}</el-checkbox>
      </template>
    </el-checkbox-group>
  </div>
</template>

<script>
import { getOptionsText } from "../../../utils";

import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-checkbox-group",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
  },
  computed: {
    formValue: {
      get() {
        const t = Object.prototype.toString.call(this.modelValue)
        if (t == "[object Array]") {
          return this.modelValue
        }else {
          return this.modelValue ? this.modelValue.split(",") : [];
        }
      },
      set(val) {
        const modelValue = val ? val.join(",") : "";
        this.$emit("update:modelValue", modelValue);
        this.onChange(modelValue);
      },
    },
  },
  methods: {
    getOptionsText,
  },
};
</script>

<style lang="scss" scoped></style>
